<template>
  <back-dialog-base
    @onCommit="handleSubmit"
    :title="title"
    :visible="visibleDialog"
    width="446px"
    @close="closeDlog"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="巡检类型：" prop="patrolPointType">
              <el-input disabled v-model="form.patrolPointType"></el-input>
            </el-form-item>
            <el-form-item label="巡检人员：" prop="patrolPerson">
              <el-input disabled v-model="form.patrolPerson"></el-input>
            </el-form-item>
            <el-form-item label="巡检班长：" prop="patrolMonitor">
              <el-input disabled v-model="form.patrolMonitor"></el-input>
            </el-form-item>
            <el-form-item label="巡检结果：" prop="handleResult">
              <el-input disabled v-model="form.handleResult"></el-input>
            </el-form-item>
            <el-form-item label="处置人：" prop="handlePerson">
              <el-input disabled v-model="form.handlePerson"></el-input>
            </el-form-item>
            <el-form-item label="开始时间：" prop="patrolStartTime">
              <el-input disabled v-model="form.patrolStartTime"></el-input>
            </el-form-item>
            <el-form-item label="结束时间：" prop="patrolEndTime">
              <el-input disabled v-model="form.patrolEndTime"></el-input>
            </el-form-item>
            <el-form-item label="处置时间：" prop="handleTime">
              <el-date-picker
                v-model="form.handleTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm"
                placeholder="--请选择--"
              />
            </el-form-item>
            <el-form-item label="处置图片：" prop="fileInfo">
              <!-- <el-upload
                :action="url"
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="true"
                :before-upload="beforeUpload"
                :headers="{ Authorization: token }"
                accept=".png,.gif,.jpg,.jpeg"
                :on-success="successa"
                :before-remove="handleRemove"
                ref="uploaddemo"
                :value="form.fileInfo"
              >
                <el-button planType="primary">上传图片</el-button>
              </el-upload> -->
              <el-upload
                v-model:file-list="fileList"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                accept=".png,.gif,.jpg,.jpeg"
                :limit="5"
                :headers="headers"
                :before-upload="beforeUpload"
                :multiple="true"
                :on-exceed="handleExceed"
                :show-file-list="true"
              >
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { InspectionRecordSave } from '@/api/CheckingPoint'
import { ElMessage, UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import store from '@/store'
import { filterProperties } from '@turf/clusters'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const url = ref(process.env.VUE_APP_BASE_API + '/file/upload')
const token = store.getters.token
const headers = ref({ token: token })
const formRef = ref(null)
const emits = defineEmits(['onReload'])
const form = reactive({
  patrolPointType: '', //巡检类型
  id: '',
  patrolPerson: '', //巡检人员
  patrolMonitor: '', //巡检班长
  handlePerson: '', //处置人
  patrolStartTime: '', //开始时间
  patrolEndTime: '', //结束时间
  handleTime: '', //处置时间
  handleResult: '', //巡检结果
  fileInfo: {
    fileId: '',
    fileName: '',
    fileSize: 0,
    fileUrl: '',
    type: ''
  }
})
// const handlePictureCardPreview = (uploadFile) => {
//   dialogImageUrl.value = uploadFile.url
//   dialogVisible.value = true
// }
// const handleRemove = (uploadFile, uploadFiles) => {
//   console.log(uploadFile, uploadFiles)
// }
const clearForm = () => {
  if (!formRef.value) return
  // formRef.value.resetFields()
  form.value = {
    handleTime: '', //处置时间
    fileInfo: {
      // fileId: '',
      // fileName: '',
      // fileSize: 0,
      // fileUrl: '',
      // type: ''
    }
  }
}
const closeDlog = () => {
  formRef.value.resetFields()
  clearForm()
  emits('onCloes')
}
const handleRemove = () => {
  form.file = ''
  form.fileInfo.fileName = ''
  form.fileInfo.fileSize = ''
  form.fileInfo.fileUrl = ''
}
const handleExceed = (files, fileList) => {
  if (fileList.length > 5) {
    this.$message.error('最多允许上传5个文件')
    return false
  }
}
// const beforeUpload = (fileInfo) => {
//   console.log(fileInfo)
//   let fileSize = fileInfo.fileSize / 1024 / 1024 < 2
//   if (!fileSize) {
//     ElMessage({
//       showClose: true,
//       message: '上传文件不能大于500MB!',
//       type: 'warning'
//     })
//   }
// }
// const successa = (res) => {
//   // console.log('res-success', res)
//   if (res.status === 200) {
//     form.fileInfo.fileName = res.data.submittedFileName
//     form.fileInfo.fileSize = res.data.size
//     form.fileInfo.fileUrl = res.data.url
//   }
// }
const save = async (data) => {
  console.log('data', data)
  // console.log('InspectionRecordSave', InspectionRecordSave)
  const res = await InspectionRecordSave(data)
  if (res && res.id) {
    if (props.title === '新增巡检记录') {
      message({ type: 'success', message: '新增巡检记录成功!' })
    }
    clearForm()
    emits('onReload')
  }
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(props.rowData)
      save(form)
    } else {
      return false
    }
  })
}
watch(
  () => props.rowData,
  () => {
    console.log('props.rowData', props.rowData)
    // console.log('props.rowData', props.rowData)
    form.id = props.rowData.id
    form.patrolPointType = props.rowData.patrolPointType
    form.patrolPerson = props.rowData.patrolPerson
    form.patrolMonitor = props.rowData.patrolMonitor
    form.handlePerson = props.rowData.handlePerson
    form.patrolStartTime = props.rowData.patrolStartTime
    form.patrolEndTime = props.rowData.patrolEndTime
    form.handleResult = props.rowData.handleResult
  }
)
const rules = reactive({
  handleTime: [
    {
      required: true,
      message: '处置时间不能为空',
      trigger: 'blur'
    }
  ]
})
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  width: 212px;
}
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
